<template>
    <div>
        <el-menu
                 @open="handleOpen"
                 @close="handleClose"
                 background-color="#20222a"
                 text-color="#fff"
                 active-text-color="#ffd04b">
            <el-submenu v-for="item in menu" 
                        :key="item[labelKey]" 
                        :index="item[pathKey]"
                        @click="open(item)">
                <template slot="title">
                    <i :class="item[iconKey]"></i>
                    <span slot="title">{{item[labelKey]}}</span>
                </template>
                <el-menu-item-group v-if="handleHasChildren(item)">
                    <el-menu-item v-for="(child,cindex) in item[childrenKey]" 
                                  :key="child[pathKey]+','+cindex"
                                  @click="open(child)">
                        <i :class="child[iconKey]"></i>
                        <span slot="title">{{child[labelKey]}}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
    import config from './config.js'

    export default {
        name: "sidebarItem",
        data() {
            return {
                config: config
            }
        },
        props: {
            menu: {
                type: Array
            },
            first: {
                type: Boolean,
                default: false
            },
            props: {
                type: Object,
                default: () => { return {} }
            }
        },
        computed: {
            labelKey() { return this.props.label || this.config.propsDefault.label },
            pathKey() { return this.props.path || this.config.propsDefault.path },
            iconKey() { return this.props.icon || this.config.propsDefault.icon },
            childrenKey() { return this.props.children || this.config.propsDefault.children },
            nowTagValue() { return this.$router.$avueRouter.getValue(this.$route) }
        },
        methods: {
            handleHasChildren(item) {
                const has = item[this.childrenKey]
                return has && has.length > 0
            },
            handleOpen(item) {
                this.$router.$avueRouter.group = item.group
                this.$router.push({
                    path: this.$router.$avueRouter.getPath({
                        name: item[this.labelKey],
                        src: item[this.pathKey]
                    }),
                    query: item.query
                })
            },
            handleClose() {
            }
        }
    }
</script>

<style scoped>
    .el-submenu i.iconfont {
        font-family: "iconfont" !important;
        font-size: 18px !important;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        text-align:center;
        width: 24px;
        margin-right:5px;
    }
</style>
